<template>
	<view class="index">
		<view class="index_top">
			<view class="list_text">
				<view class="login-title">{{workOrderNumber}}</view>

				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						设备号:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<input type="text" maxlength="20" v-model="shebei" disabled />
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						设备型号:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<input type="text" maxlength="20" v-model="devicemodel" disabled />
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						设备类型:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<input type="text" maxlength="20" v-model="devicetype" disabled />
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						设备地址:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<Textarea v-model="deviceAddress" ref="content" :len='200' disabled></Textarea>
						<!-- <Textarea
										type="text"
										
										:len='200'
										disabled/> -->
					</view>
				</view>
				<view style="color: red;margin-left: 30px;margin-top: 20px;">客户信息：</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						姓名:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<input type="text" v-model="customerName" maxlength="20" disabled />
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						联系方式:
					</text>
				</view>
				<view class="list_input">
					<view class="input_key flex">
						<input type="text" v-model="customerContactInformation" maxlength="20" disabled />
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						详情描述:
					</text>
				</view>
				<view class="cell-left" style="margin-top: -20px;">
					<view class="cell-text">
						<Textarea v-model="contentText" ref="content" style="margin-left: 10%;border: 1px solid #ccc;"
							:len='200' disabled></Textarea>
					</view>
				</view>
				<view class="list_top_title">
					<text class="red">*</text>
					<text class="list_top_font">
						详情照片:
					</text>
				</view>
				<view class="cell-left" style="margin-top: -20px;margin-left: 5%;">
					<view class="qtpicker">
						<!-- 选中待上传的图片 -->
						<view class="preImgs" v-for="(val,index) in preImgUrl" :key='index'>
							<image style="border-radius: 6px;" mode="" :src="val" @click="showImg(val,index)">
							</image>

						</view>
					</view>
				</view>
				<!-- 确定上传到服务器 -->
				<!-- <button v-if="stas=='未完成'" :disabled="submitForbide" type="primary" style="width: 50%;margin-top: 40px;" @click="submitImg">确认完成</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: null,
				contentData: [],
				workOrderNumber: null,
				deviceAddress: '',
				customerName: '',
				shebei: '',
				devicetype: '',
				devicemodel: '',
				customerContactInformation: '',
				preImgUrl: [],
				stas: '未完成',
				contentText: '',
				date: new Date().toISOString(),
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			// console.log(this.item)
		},
		onReady() {

			this.workOrderNumber = this.item.content
			this.shebei = this.item.serialnumber
			this.deviceAddress = this.item.location
			this.customerName = this.item.contacts
			this.customerContactInformation = this.item.customerphone
			this.devicemodel = this.item.devicemodel
			this.devicetype = this.item.devicetype
			this.contentText = this.item.problemdescription
			let imgArr = []
			if (this.item.detailspath != null) {
				let a = this.item.detailspath.substring(0, this.item.detailspath.length - 1);
				imgArr = a.split(',')
				this.preImgUrl = imgArr
			}
			console.log(this.preImgUrl)
			// this.preImgUrl.push(this.item.detailspath)
		},
		methods: {

			//获取当前时间
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			//点击小图查看大图片
			showImg(val, index) {
				// console.log(val, '点击了')
				let that = this
				uni.previewImage({
					// 对选中的图片进行预览
					urls: that.preImgUrl, //图片数组  // urls:['','']  图片的地址 是数组形式
					current: index, //当前图片的下标
				})
			},
			submitImg() {
				// console.log(this.workOrderNumber + "====-------")
				// console.log(this.dateFormat(this.date))
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.qtpicker {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
		padding: 10rpx 0;

		.preImgs {
			margin: 13rpx;
			position: relative;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.cuo {
				width: 17pt;
				height: 17pt;
				//line-height: 12px;
				//text-align: center;
				///* font-size: 16px; */
				//border-radius: 50%;
				//background-color: #223E4B;
				//color: #FFFFFF;
				position: absolute;
				right: 0px;
				top: 0px;
			}
		}


		.addImg {
			width: 200rpx;
			height: 200rpx;
			border: 2rpx solid #d4d4d4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			background-color: #e2dddd;
			margin-left: 13rpx;
			margin-top: 13rpx;
		}
	}

	.cell {
		height: auto;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		background: #fff;
		//border-bottom: 1px solid #BDD8F6;

		.cell-left {
			display: flex;
			align-items: center;
			padding: 8px;

			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}

			.cell-text {
				color: #595959;
				font-size: 15px;
				margin-left: 0rpx;

				//width: 180rpx;
			}
		}

		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}



	.index {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #f6f6f6;
	}

	.index_top {
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}

	.login-title {
		height: 10%;
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
		// display: flex;
		// justify-content: flex-start;
		// margin-left: 40%;
		font-weight: 700;
		font-size: 40rpx;
		color: #ff0000;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}

	.index_footer {
		height: 12vh;
		margin: 2.5vh 30px;

		.btn_close {
			width: 43vw;
			height: 90px;
			background: #ffffff;
			border: 1.96px solid #e5e5e5;
			border-radius: 7.86px;
			line-height: 90px;
			text-align: center;
		}

		.btn_submit {
			width: 43vw;
			height: 90px;
			background: #12b7f5;
			border-radius: 7.86px;
			line-height: 90px;
			text-align: center;
			color: #fff;
		}
	}

	.list_text {
		margin-top: 0;
		min-height: 100%;
		background: #ffffff;

		.list_top_title {
			height: 10%;
			line-height: 20px;
			font-size: 12px;
			font-face: PingFangSC;
			font-weight: 500;
			line-height: 0;
			letter-spacing: 0;
			paragraph-spacing: 0;
			margin-top: -20px;

			.red {
				color: rgba(244, 69, 12, 1);
				text-align: left;
				line-height: 100px;
				margin: 0 10px 0 30px;
			}

			.list_top_font {
				color: rgba(51, 51, 51, 1);
				text-align: left;
				line-height: 50px;
			}
		}

		.list_input {
			// position: relative;
			// margin: 2 120px;
			width: 200px;
			margin-top: -60PX;
			margin-left: 100px;
			min-height: 30px;
			background: #fafafa;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 6px;

			.input_key {
				height: 10px;
				width: 200PX;

				input {
					width: 100%;
					height: 100%;
					padding: 0 24px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 12px;
				}
			}

			.image_xls {
				width: 20px;
				height: 70px;
				margin: auto 20px;

				image {
					width: 100%;
					height: 10px;
				}
			}

			.scroll-view {
				width: 100%;
				position: absolute;
				z-index: 3;
				top: 80px;
				background: #fafafa;
				border: 1px solid rgba(0, 0, 0, 0.1);
				box-shadow: 0px 0px 2px #e2e2e2;

				.user-name {
					width: 100%;
					padding: 20px;
					font-size: 26px;
					border-bottom: 1px solid #e2e2e2;
				}
			}
		}

		.list_inputs {
			position: relative;
			margin: 0 54px 30px 54px;
			min-height: 100px;
			background: #fafafa;
			border-radius: 6px;

			textarea {
				width: 78.5vw !important;
				height: 200px !important;
				border: 1px solid rgba(0, 0, 0, 0.1);
				padding: 24px;
			}
		}
	}

	.footer_bottom {
		margin-bottom: 30px;
		height: 400px;
	}

	.list_name {
		min-height: 100px;
		background: #ffffff;
		border-top: 1px solid #eeeeee;
		padding: 0 30px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 30px;
		color: #000000;

		.name_left {
			height: 42px;
			margin: auto;
			width: 16vw;
		}

		.name_right {
			width: 72vw;
			min-height: 42px;
			word-wrap: break-word;
			word-break: normal;
			line-height: 42px;
			margin: auto;
		}
	}

	.flex {
		display: flex;
	}

	.flex_s {
		display: flex;
		justify-content: space-between;
	}

	.flex_e {
		display: flex;
		justify-content: space-evenly;
	}
</style>